<template>
	<div class="music_con">
		<div class="material_item" v-for="(item, index) in materialList">
			<div class="play_icon" @click="previewMaterial(item)">
				<cu-icon class="icon is_hover" type="icon-bofang"
					style="font-size: 20px; cursor: pointer; color: #fff;" />
				<cu-icon class="icon is_default" type="icon-yinle"
					style="font-size: 20px; cursor: pointer; color: #fff;" />
			</div>
			<div class="audio_name">{{ item.material_name }}</div>
			<div class="duration_txt">{{ item.material_duration_text }}</div>
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		nextTick,
		onMounted,
	} from "vue";
	import {
		DeleteOutlined,
		PlusOutlined,
		CloseOutlined,
	} from "@ant-design/icons-vue";
	import {
		message
	} from "ant-design-vue";
	export default defineComponent({
		props: {
			materialList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		components: {
			DeleteOutlined,
			PlusOutlined,
			CloseOutlined,
		},
		setup(props, context) {
			const previewMaterial = (item) => {
				item.material_type = 'audio'
				context.emit('preview', item)
			}
			return {
				previewMaterial
			}
		},
	});
</script>

<style lang="less" scoped>
	.music_con {
		width: 100%;
		height: 250px;
		margin-top: 20px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		color: #b9bbc1;
		border-radius: 5px;
		overflow-y: scroll;
	
		&::-webkit-scrollbar {
			width: 5px;
			height: 0px;
		}
	
		&::-webkit-scrollbar-track {
			width: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}
	
		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}
	
		.material_item {
			padding: 10px;
			display: flex;
			align-items: center;
			margin-left: 10px;
			margin-top: 10px;
			background: #fafafc;
			border: 1px solid #efeff5;
			border-radius: 5px;
			width: 24%;
			position: relative;
			.play_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30px;
				height: 30px;
				border-radius: 50px;
				background: #5b2b5a;
	
				.is_hover {
					display: none;
				}
	
				.is_default {
					display: block;
				}
	
				&:hover {
					background: #8e278b;
	
					.is_hover {
						display: block;
					}
	
					.is_default {
						display: none;
					}
				}
			}
	
			.audio_name {
				color: #333;
				font-size: 14px;
				margin-left: 10px;
				max-width: calc(100% - 200px);
				display: inline-block;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
	
			.is_recognized {
				background: rgba(84, 255, 173, .7);
				border-radius: 2px;
				font-size: 12px;
				color: #fff;
				font-size: 12px;
				padding: 3px 10px;
				margin-left: 10px;
			}
	
			.no_recognized {
				background: rgba(255, 197, 84, 1);
				border-radius: 2px;
				font-size: 12px;
				color: #fff;
				padding: 3px 10px;
				margin-left: 10px;
			}
	
			.duration_txt {
				color: #333;
				font-size: 14px;
				position: absolute;
				right: 15px;
				top: 15px;
			}
		}
	}
</style>